<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-12-15 09:18:36
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-20 09:16:35
-->
<template>
  <div class="address-box">
    <a-list class="address-list" size="small" bordered :data-source="addressOfData">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta :description="item.address">
            <template #title>
              <a-space>
                <span>{{ item.realName }}</span>
                <span>{{ item.phoneNum }}</span>
                <a-tag v-if="item.defaultAddress === 0">默认</a-tag>
              </a-space>
            </template>
          </a-list-item-meta>
          <template #actions>
            <a-space>
              <a-button type="primary" size="small" @click="showDrawer(item)"
                >修改</a-button
              >
              <a-popconfirm
                title="确定要删除这条信息吗?"
                @confirm="confirmDelete(item.id)"
              >
                <a-button danger size="small">删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-list-item>
      </template>
    </a-list>
  </div>
  <a-drawer title="修改地址" placement="right" :closable="false" :open="openDrawer">
    <a-form :model="addressItem" name="basic">
      <a-form-item label="姓名" name="realName">
        <a-input v-model:value="addressItem.realName" />
      </a-form-item>
      <a-form-item label="电话" name="phoneNum">
        <a-input v-model:value="addressItem.phoneNum" />
      </a-form-item>
      <a-form-item label="地区" name="phoneNum">
        <a-cascader
          v-model:value="areaValue"
          :options="options"
          :fieldNames="{ value: 'label' }"
          @change="areaChange"
          placeholder="请选择地区"
        />
      </a-form-item>
      <a-form-item label="地址" name="address">
        <a-input v-model:value="addressItem.address" />
      </a-form-item>
      <div class="form-action">
        <a-button style="margin-right: 8px" @click="closeDrawer">取消</a-button>
        <a-button type="primary" @click="updateAddress">提交</a-button>
      </div>
    </a-form>
  </a-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { CascaderProps } from 'ant-design-vue';
import City from '@/utils/city.config';

const props = defineProps({
  addressList: {
    type: Array<API.AddressItem>,
    default: [],
  },
});
const openDrawer = ref(false);
const addressItem = reactive<API.AddressItem>({});
const addressOfData = ref<API.AddressItem[]>(props.addressList);

const options: CascaderProps['options'] = City;
const areaValue = ref<string[]>([]);

/**
 * 显示抽屉
 * @param address
 */
const showDrawer = (address: API.AddressItem) => {
  Object.assign(addressItem, address);
  areaValue.value = [address.province!, address.city!, address.area!];
  openDrawer.value = true;
};

/**
 * 关闭抽屉
 */
const closeDrawer = () => {
  openDrawer.value = false;
};

const areaChange = (values: Array<string>) => {
  if (
    values[0] === '北京' ||
    values[0] === '上海' ||
    values[0] === '天津' ||
    values[0] === '重庆'
  ) {
    addressItem.province = values[0];
    addressItem.city = values[0];
    addressItem.area = values[1];
  } else {
    addressItem.province = values[0];
    addressItem.city = values[1];
    addressItem.area = values[2];
  }
};

/**
 * 更新地址信息
 */
const updateAddress = () => {
  console.log(addressItem);
};

/**
 * 确认删除当前行
 * @param id
 */
const confirmDelete = async (id: number) => {
  addressOfData.value = addressOfData.value.filter((item) => item.id !== id);
};
</script>

<style lang="less" scoped>
.address-box {
  width: 100%;
  max-height: 500px;
  overflow-y: auto;
  padding: 30px 0;

  .address-list {
    width: 100%;
    // position: relative;
  }
}

.form-action {
  text-align: right;
}
</style>
